<template>
  <div class="block-top">
    <div class="block1">
      <item class="item" :count="7"></item>
      <box-title title="资源分配率"></box-title>
      <process
        :data="item"
        v-for="(item, index) in distributionData"
        :key="index"
      ></process>
    </div>
    <div class="block1">
      <item class="item" :count="7"></item>

      <box-title title="资源使用率"></box-title>
      <process
        :data="item"
        v-for="(item, index) in distributionData"
        :key="index"
      ></process>
    </div>
    <div class="block2 flex column">
      <item class="item" :count="7"></item>

      <box-title title="物理资源统计"></box-title>
      <div class="flex-1">
        <box-bar
          unit="数量(台)"
          :datas="physics"
          color="#f45626"
          id="physics"
        ></box-bar>
      </div>
    </div>
  </div>
</template>
<script>
import boxTitle from "../components/title";
import boxCount from "../components/box-count";
import boxBar from "../components/bar";
import process from "../components/process";
import base from "../mixins/index";
import item from "../components/block.vue";

export default {
  mixins: [base],
  components: { boxTitle, boxCount, boxBar, process, item },
  data() {
    return {
      distributionData: [
        { label: "CPU", percent: 60, count: "1100/2000" },
        { label: "内存", percent: 60, count: "1100/2000" },
        { label: "存储", percent: 60, count: "1100/2000" },
        { label: "公网IP", percent: 60, count: "1100/2000" },
        { label: "出口宽带", percent: 60, count: "1100/2000" },
      ],
    };
  },
};
</script>
<style lang="less" scoped>
@import url("../styles/main.less");

.block-w {
  width: 445px;
  margin-top: 10px;
}
.block1 {
  position: relative;
  height: 212px;
  .block-w;
  .block-box;
  .bolock-line-r;
}
.block2 {
  height: 234px;
  .block-w;
  .block-box;
  .bolock-line-r;
}
</style>